<template>
  <a-modal
    :title="model.id ? '编辑连接' : '新增连接'"
    :visible="visible"
    :confirm-loading="loading"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-model-item label="连接名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入连接名称" />
      </a-form-model-item>

      <a-form-model-item label="连接类型" prop="connectionType">
        <a-select v-model="form.connectionType" placeholder="请选择连接类型">
          <a-select-option value="single">单节点</a-select-option>
          <a-select-option value="replicaSet">副本集</a-select-option>
          <a-select-option value="sharded">分片集群</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="MongoDB URI" prop="uri">
        <a-textarea
          v-model="form.uri"
          :rows="4"
          placeholder="请输入MongoDB连接字符串"
        />
      </a-form-model-item>

      <a-form-model-item label="认证数据库" prop="authSource">
        <a-input v-model="form.authSource" placeholder="请输入认证数据库" />
      </a-form-model-item>

      <a-form-model-item label="SSL模式" prop="sslMode">
        <a-radio-group v-model="form.sslMode">
          <a-radio value="disabled">禁用</a-radio>
          <a-radio value="optional">可选</a-radio>
          <a-radio value="required">必需</a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="读写偏好" prop="readPreference">
        <a-select v-model="form.readPreference" placeholder="请选择读写偏好">
          <a-select-option value="primary">primary</a-select-option>
          <a-select-option value="preferredSecondary">preferredSecondary</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  name: 'ConnectionForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    model: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        name: '',
        connectionType: undefined,
        uri: '',
        authSource: 'admin',
        sslMode: 'disabled',
        readPreference: 'primary'
      },
      rules: {
        name: [
          { required: true, message: '请输入连接名称', trigger: 'blur' },
          { max: 50, message: '连接名称不能超过50个字符', trigger: 'blur' }
        ],
        connectionType: [
          { required: true, message: '请选择连接类型', trigger: 'change' }
        ],
        uri: [
          { required: true, message: '请输入MongoDB连接字符串', trigger: 'blur' },
          { max: 500, message: '连接字符串不能超过500个字符', trigger: 'blur' }
        ],
        authSource: [
          { max: 50, message: '认证数据库不能超过50个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    model: {
      handler(val) {
        this.form = { ...this.form, ...val }
      },
      immediate: true
    }
  },
  methods: {
    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('ok', this.form)
        }
      })
    },
    handleCancel() {
      this.$refs.form.resetFields()
      this.$emit('cancel')
    }
  }
}
</script>
